<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登陆</title>
    <link rel="stylesheet" th:href="@{/static/css/main.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/login.css}"/>
</head>

<body>

<h4 style="font-size:16px; text-align:center ; display: inline-block; margin-top: 8%; margin-left: 48%" id="open_btn">登陆
     </h4>



<div class="content" style="margin-top:3%">
    <div class="register-box">
        <div class="wrap">
            <div class="register-box-con">

                <div class="register-box-cen-form clearfix mar-bottom20">
                    <input type="text" class="login-box-cen-form-input w358" placeholder="请输入手机号" id="reg_phone"/>
                    <label class="err err-top40" id="reg_phone_text">手机号错误</label>
                </div>

                <div class="register-box-cen-form clearfix mar-bottom20">
                    <input type="text" class="login-box-cen-form-input w228" placeholder="短信验证码" id="reg_mescode"/>
                    <button class="login-box-cen-form-mes w120 mar-left10" id="reg_mescode_btn" able="able">获取验证码
                    </button>
                    <label class="err err-top40" id="reg_mescode_text">短信验证码错误</label>
                </div>
                <div class="register-box-cen-form clearfix mar-bottom20 mar-top50">
                    <a th:href="@{/login/user}"><label class="phone_login" id="background_phone" >使用用户名登陆</label></a>
                </div>
                <div class="register-box-cen-form clearfix mar-bottom20 mar-top50">
                    <input type="submit" value="登录" class="login-box-cen-form-button w380" id="reg_submit"/>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/static/js/tbdValidate.js}"></script>
<script type="text/javascript" th:src="@{/static/js/upload.js}"></script>
<script type="text/javascript">
    $(function () {

        //获取短信验证码
        var mesdong = null;
        var mestime = 60;
        $("#reg_mescode_btn").click(function () {
            var phoneval = $.trim($("#reg_phone").val());
            if (regconfig[0].rule[0].reg.test(phoneval)) {
                $("#reg_phone_text").hide();
            } else {
                $("#reg_phone_text").html(regconfig[0].rule[0].text).show();
                $("#reg_phone").focus();
                return false
            }
            ;
            if (regconfig[0].rule[1].reg.test(phoneval)) {
                $("#reg_phone_text").hide();
            } else {
                $("#reg_phone").focus();
                $("#reg_phone_text").html(regconfig[0].rule[1].text).show();
                return false
            }
            ;
            if ($(this).attr('able') == "able") {//发送
                $(this).attr('able', "disable");
                $(this).css('cursor', 'not-allowed');
                $(this).html(mestime + "s");
                mesdong = setInterval(function () {//倒计时
                    mestime -= 1;
                    if (mestime < 0) {
                        $("#reg_mescode_btn").attr('able', "able");
                        $("#reg_mescode_btn").css('cursor', 'pointer');
                        $("#reg_mescode_btn").html('获取验证码');
                        mestime = 60;
                        clearInterval(mesdong);
                    } else {
                        $("#reg_mescode_btn").html(mestime + "s");
                    }
                    ;
                }, 1000);
                //短信发送接口

            } else {

            }
            ;
        });
        //登陆
        var regconfig = [

            {
                eleinput: "reg_phone",
                eletext: "reg_phone_text",
                rule: [{reg: /^.+$/, text: '手机号不能为空'}, {reg: /^1[34578]\d{9}$/, text: '手机号格式错误'}]
            } ,
            {
                eleinput: "reg_mescode",
                eletext: "reg_mescode_text",
                rule: [{reg: /^.+$/, text: '短信验证码不能为空'}, {reg: /^[0-9]{6}$/, text: '输入6位短信验证码'}]
            }
        ];
        tbdValidate(
            regconfig,
            {
                elesubmit: "reg_submit",//提交按钮
                funsubmit: function () {//验证通过可提交回调
                    //信息提交接口
                    alert("成功");
                },
                funerr: function () {//不可提交回调

                },
                funerrlist: function (errlist) {
                    $('#' + errlist[0]).focus();
                }
            },
        );
        //end
    });
</script>

</body>
</html>
